January 2010

Volume 25 Number 01

Toolbox - UI Mockups, User Experience Tips, JavaScript Checker and More

By Scott Mitchell | January 2010

Quickly Create UI Mockups

User interface mockups are an important tool in software engineering. During the requirements phase they serve as prototypes that elicit feedback from stakeholders and end users, and they’re an integral part of any functional specification.

But what’s the best way to create UI mockups? The simplest approach is to use pen and paper. It’s quick and easy, requires no special software, and can be done by anyone, regardless of their technical savvy. Of course, such prototypes are harder to archive and are more difficult to share with remote stakeholders.

Alternatively, you can use programs like Microsoft Visio or Visual Studio Designer to build UI mockups that closely mimic what the finished product will look like. Unfortunately, creating such mockups takes considerably longer than using pen and paper. Also, showing non-technical stakeholders a “polished” mockup may lead them to believe that the work is nearly done.

Balsamiq Mockups For Desktop (version 1.6) is a UI mockup tool that combines the speed, simplicity, and low-tech look and feel of paper mockups with the archival and sharing benefits inherent in computer-generated mockups. And unlike Visual Studio and Visio, which are large and complex programs that serve many functions, Balsamiq Mockups has a focused goal: to make creating UI mockups as quick and painless as possible.

The Mockups For Desktop user interface is incredibly straightforward—there’s a design surface and a list of common UI controls to add to your mockup, including buttons, labels, textboxes, checkboxes, tabs, combo boxes, hyperlinks, scroll bars, splitters and more. There are also pre-built controls for browser windows, video players and dialog boxes. In total, Balsamiq Mockups ships with more than 75 controls. You can also import any image file as a control or download user-created controls from the Balsamiq Studios LLC Web site.

Adding a control to your mockup is as simple as dragging it from the list of controls and dropping it onto the design surface. Once on the design surface, double-click the control to edit its contents. Hovering your mouse over a control displays a floating panel with an assortment of configuration options specific to that control. Every setting is right there in the floating panel—there are no menus or property windows you need to hunt and peck through. Having all of these settings right at your fingertips flattens the learning curve and greatly reduces the time it takes to create mockups.

Check out the mockup in Figure 1, which I created in three minutes, from start to finish. To mock the list of e-mails I dragged a Data Grid control onto the designer and then used my mouse to position and size it. Next, I double-clicked the grid, which displays its contents as comma-delimited text. I replaced the default contents with text to represent the three columns and four rows shown in Figure 1. I then hovered my mouse over the grid to bring up its properties in a floating window. From there I ticked a checkbox to add a scrollbar, used a slider to adjust the row height and chose to have the second row appear as selected.

Figure 1 A Quick Balsamiq UI Mockup

Once a mockup has been created, it can be saved to disk, exported as a .PNG image or exported into an XML format. In addition to the regular version, a stripped-down version of Mockups For Desktop can be used for free from the company’s Web site. And a collaborative, online version of the software is in the works.

Price: $79 per user license
balsamiq.com

Blogs of Note

The user experience (UX) is one of the most important aspects of a software application. Your users decide whether your application is a success or not, and they don’t care about your application’s architecture or that super-clever algorithm you spent a week perfecting. Unfortunately, most software developers—myself included—struggle with UX design. It’s all too easy to get immersed in the low-level details of the application and leave UX design as an afterthought.

To stay reminded of the importance of UX design, and to pick up some great tips for improving your applications’ user experiences, check out the UX Booth Blog, which includes submissions from several noted UX design authors, trainers and consultants. My favorite posts are those that offer specific tips for improving the UX of a common scenario. Building a contact form on your Web site? Be sure to read “Creating a Usable Contact Form,” where author Matthew Kammerer shares advice on what information to display, how to lay it out on screen and what to do once the feedback has been submitted. And be sure to check out John Hyde’s post, “Handling User Error with Care,” in which he shares best practices on where to display error messages and how to word them.

Other blog entries highlight how to improve the user experience through less direct means. One post describes how to improve the performance of a Web site by creating optimized images. Another entry shares tools for improving an application’s accessibility. You’ll also find more general posts, including book reviews, usability lessons learned from the trenches and interviews with usability experts.

The UX Booth Blog

https://www.uxbooth.com/

Check Your JavaScript

JavaScript is an interesting language. For much of its history, JavaScript was considered somewhat of a toy language, used mainly for performing simple tasks in Web pages. But JavaScript is a robust and powerful language, and today it’s used to build rich, interactive Web applications.

Unfortunately, the JavaScript language has a number of design decisions that allow for poor programming practices and, if misused, can lead to bugs and less-maintainable code. For example, in C# every line must terminate with a semicolon. In JavaScript, most statements can end with either a semicolon or a carriage return, which can be confusing. Likewise, in C# every variable must be declared before it can be used. Not so in JavaScript.

JSLint is a free JavaScript Code Quality Tool created by Douglas Crockford that runs a variety of static analysis checks against a block of JavaScript code. By default, JSLint displays warnings when encountering global variables; statements not terminated with a semicolon; if, while, do and forstatements that aren’t followed by a statement block; and unreachable code, among other conditions. Additional checks are configurable through JSLint’s options. For instance, you can instruct JSLint to disallow undefined variables, to disallow the unary increment and decrement operators ++ and --, and whether to allow the use of the evalfunction.

To use JSLint, visit JSLint.com, paste your JavaScript code into the textbox, select the options and click the “JSLint” button. JSLint will then parse your code and display a list of errors, as Figure 2 shows. And because JSLint is written in JavaScript, it runs entirely on your browser, meaning that your code is not sent over the Internet. You can optionally download the JSLint source code from the Web site to run on your local environment, if you’d prefer.

Also check out JSLint.VS, a free Visual Studio Add-In created by Predrag Tomasevic that lets you run JSLint on a file or selected code block directly from the Visual Studio IDE. The errors identified by JSLint appear in the Task List window. You can even configure JSLint.VS to run on selected files or folders whenever the project is built.

Figure 2 The JSLint JavaScript Code Quality Tool

JSLint: jslint.com JSLint.VS: jslint.codeplex.com

The Bookshelf

Over the past decade, storing structured information has become a trivial task. With modern databases and data-access frameworks, collecting data involves a sprinkle of drag and drop with just a dash of code. Coupled with decreasing storage costs and the increasing competitive advantage such information can bear, businesses are eager to catalog every possible data point.

Of course, such data is useless unless workers can access and assess the data in a meaningful way. Microsoft SQL Server Reporting Services (SSRS) is a server-based, enterprise-grade reporting platform that enables workers to create, explore 
and view reports.

Like with any enterprise-grade platform, SSRS is expansive in its features and use cases. I recently helped a client evaluate and get started with SSRS and found “Microsoft SQL Server 2008 Reporting Services Unleashed” (Sams, 2009) to be an invaluable guide for learning the ins and outs.

The book is divided into five parts. The first part provides a light overview of SSRS, highlights common user scenarios, introduces the SSRS architecture, and compares and contrasts different report deployment scenarios. There’s also a short chapter on installing SSRS, with step-by-step instructions and plenty of screenshots.

The primary purpose of SSRS is to present data through reports and to allow workers to build, analyze and consume these reports. The book’s second part explores how to author reports and examines topics like expressions, parameters, formatting, navigation, aggregation and ad hoc reports in-depth. During my project, I routinely bumped into roadblocks when designing reports. I’d get stumped trying to format data a certain way, or get stuck when needing certain information—like the date and time the report was generated—to show on the report. Most of these obstacles were side-stepped by using the book’s index and thumbing through the chapters in this section.

Following report authoring, the book looks at managing SSRS. SSRS is a server-based technology; the reports (and data) reside on servers and can be accessed by clients in a variety of ways. Reports can be generated on-demand or on schedule, and clients can 
subscribe to reports and have them delivered through a file share or e-mail. These various options, along with other administration 
tasks, are covered here.

The book’s last two sections look at how to customize and extend SSRS, along with ways to integrate SSRS and SharePoint.

“Microsoft SQL Server 2008 Reporting Services Unleashed” is an excellent introduction to SSRS for administrators, DBAs and users. The depth of material is a little light in some areas, but this book does an excellent job conveying the most important aspects and exploring the breadth of features and functionality available in SSRS.

Microsoft SQL Server 2008 Reporting Services Unleashed

Price: $49.99
informit.com/sams

Scott Mitchell*, author of numerous books and founder of 4GuysFromRolla.com, is an MVP who has been working with Microsoft Web technologies since 1998. Mitchell is an independent consultant, trainer and writer. Reach him at Mitchell@4guysfromrolla.com or via his blog at ScottOnWriting.net.*